<template>
  <div>
    <ul>
      <li v-for="(item, index) in man" :key="index">
        <router-link
          :to="`/detail?name=${item.name}&occupation=${item.occupation}&img=${item.img}`"
        >
          <img :src="item.img" alt="" />
          {{ item.name }}
          <br />
          {{ item.occupation }}
        </router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "List-man",
  data: function () {
    return {
      man: [
        {
          img: require("../assets/xy.png"),
          name: "萧逸",
          occupation: "赛车手",
        },
        {
          img: require("../assets/cls.png"),
          name: "查理苏",
          occupation: "医生",
        },
        { img: require("../assets/lc.png"), name: "陆沉", occupation: "CEO" },
      ],
    };
  },
};
</script>

<style>
li {
  width: 80%;
  border: 3px solid white;
  border-radius: 5px;
  text-align: left;
  margin: 10px auto;
  list-style: none;
}
a {
  color: black;
  text-decoration: none;
}
</style>